
<template>
    <el-form ref="ruleFormRef" :model="ruleForm" label-width="120px" class="demo-ruleForm" size="default" status-icon>
        <el-form-item label="关联专题" prop="productCategoryId">
            <el-transfer v-model="value" filterable :filter-method="filterMethod" filter-placeholder="请输入专题名称"
                :data="data" :titles="['待选择', '已选择']" />
        </el-form-item>
    </el-form>

    <p style="text-align:center">
        <el-button size="large" @click="emit('next', 2)">上一步, 填写商品属性</el-button>
        <el-button type="primary" size="large" @click="next">完成提交商品</el-button>
    </p>
</template>
    
<script setup lang='ts'>
import { reactive, ref } from 'vue';

const emit = defineEmits(['next'])
const ruleForm = reactive<Indexable>({
    keyword: '',
    productSn: '',
    productCategoryId: '',
    brandId: '',
    publishStatus: '',
    verifyStatus: '',
    content: ''
})

interface Option {
    key: number
    label: string
    initial: string
}

const generateData = () => {
    const data: Option[] = []
    const states = [
        'California',
        'Illinois',
        'Maryland',
        'Texas',
        'Florida',
        'Colorado',
        'Connecticut ',
    ]
    const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT']
    states.forEach((city, index) => {
        data.push({
            label: city,
            key: index,
            initial: initials[index],
        })
    })
    return data
}

const data = ref<Option[]>(generateData())
const value = ref([])

const filterMethod = (query, item) => {
    return item.initial.toLowerCase().includes(query.toLowerCase())
}

const next = () => {
    emit('next', 0)
}
</script>
    
<style>
</style>